<!-- eslint-disable vue/no-parsing-error -->
<template>
    <div class='box'>
    <div class="body">
     <commonHeaderVue type="精选" @getNewList="getNewList" @removeForm="removeForm" />
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first" ></el-tab-pane>
    <el-tab-pane label="待审核" name="second"></el-tab-pane>
    <el-tab-pane label="已审核" name="third"  ></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth" @tab-click="getAllChoice({...pageObj,chkState:2})" ></el-tab-pane>
  </el-tabs>
     <headerVue :title="counts" />
          <el-table
      :data="renderList"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        >
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        >
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录">
      </el-table-column>
           <el-table-column
        prop="questionType"
        label="题型">
         <template #default="{row}">
            <span>{{ row.questionType==='1'?'单选':row.questionType==='2'?'多选':'简答' }}</span>
          </template>
      </el-table-column>
           <el-table-column
        prop="question"
        label="题干">
        <template #default="{row}">
            <span>{{ row.question.replace(/<.*?>/ig, '') }}</span>
          </template>
      </el-table-column>
                <el-table-column
        prop="addDate"
        label="录入时间">
      </el-table-column>
                <el-table-column
        prop="difficulty"
        label="难度">
          <template #default="{row}">
            <span>{{ row.difficulty==='1'?'简单':row.difficulty==='2'?'一般':'困难' }}</span>
          </template>
      </el-table-column>
        <el-table-column
        prop="creator"
        label="录入人">
      </el-table-column>
       <el-table-column
        prop="chkState"
        label="审核状态">
       <template #default="{row}">
            <span>{{ !row.chkState?'待审核':row.chkState===1?'已审核':'已拒绝' }}</span>
          </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见">
      </el-table-column>
  <el-table-column
      fixed="right"
      label="操作"
      width="190">
      <template #default="{ row }" >
        <el-button  type="text" size="small" @click="readerQuestion(row.id)">预览</el-button>
        <el-button type="text" size="small" :disabled="row.chkState?true:false" @click="changeAudit(row.id)" >审核</el-button>
        <el-button type="text" size="small" :disabled="!row.catalog?true:false" @click="editQuestion(row.id)" >修改</el-button>
        <el-button type="text" size="small" @click="changeState(row.id,row.publishState)" >{{row.publishState?'下架':'上架'}} </el-button>
        <el-button type="text" size="small" :disabled="!row.catalog?true:false" @click="delQuestion(row.id)" >删除</el-button>
      </template>
    </el-table-column>

    </el-table>
  <pageToolVue :total="counts" :paginationPage="pageObj.page" :paginationPagesize="pageObj.pagesize" @pageChange="pageChange" @changSize="onPageSizeChange"  />
  <previewVue ref="view" :renderObj="renderObj" />
    <audit ref="audit" @changeQuestion="changeQuestion" :id="id" />
    </div>

  </div>
</template>

<script>
import headerVue from '../../module-manage/components/header.vue'
import commonHeaderVue from '../components/commonHeader.vue'
import pageToolVue from '@/module-manage/components/page-tool'
import { choice, detail, remove, choicePublish, choiceCheck } from '@/api/hmmm/questions.js'
import previewVue from '../components/preview.vue'
import audit from '@/module-hmmm/components/audit'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    commonHeaderVue, headerVue, pageToolVue, previewVue, audit
  },
  data () {
    return {
      pageObj: {
        page: 1,
        pagesize: 10
      },
      renderList: [],
      counts: null,
      renderObj: {},
      activeName: 'first',
      id: null
    }
  },
  created () {
    this.getAllChoice(this.pageObj)
  },
  methods: {
    async getAllChoice (obj) {
      const { data } = await choice(obj)
      console.log(data)
      this.renderList = [...data.items]
      this.renderList.forEach(item => { item.addDate = parseTime(item.addDate) })
      this.counts = data.counts
    },
    getNewList (form) {
      this.getAllChoice({ ...this.pageObj, ...form })
    },
    removeForm () {
      this.getAllChoice(this.pageObj)
    },
    async readerQuestion (id) {
      const { data } = await detail({ id })
      this.renderObj = { ...data }
      this.$refs.view.openDialog()
    },
    editQuestion (id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id
        }
      })
    },
    delQuestion (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getAllChoice(this.pageObj)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    pageChange (val) {
      this.pageObj.page = val
      this.getAllChoice(this.pageObj)
    },
    onPageSizeChange (val) {
      this.pageObj.pagesize = val
      this.getAllChoice(this.pageObj)
    },
    handleClick (tab, event) {
      if (tab.name === 'first') {
        this.getAllChoice(this.pageObj)
      } else if (tab.name === 'second') {
        this.getAllChoice({ ...this.pageObj, chkState: 0 })
      } else if (tab.name === 'third') {
        this.getAllChoice({ ...this.pageObj, chkState: 1 })
      } else {
        this.getAllChoice({ ...this.pageObj, chkState: 2 })
      }
    },
    async changeState (id, state) {
      const newstate = state ? 0 : 1
      await choicePublish({ id, publishState: newstate })
      this.$message.success(state ? '下架成功' : '上架成功')
      this.getAllChoice(this.pageObj)
    },
    changeAudit (id) {
      console.log(id)
      this.id = id
      this.$refs.audit.openDialog()
    },
    async changeQuestion (form) {
      form.chkState = form.chkState === '拒绝' ? 2 : 1
      await choiceCheck(form)
      this.getAllChoice(this.pageObj)
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}
/deep/.el-tabs__nav-scroll{
  padding-top: 10px;
}
/deep/.el-tabs__item{
  height: 40px;
  font-size: 12px;
}

</style>
